 <template>
  <div class="activityDetail">
    <!-- 查看空间详情 -->
    <div class="infoBox">
      <div class="header">
        <div class="logo">
          <img :src="activityList.cover" alt="" style="width:60px;height:60px;border-radius:10px">
        </div>
        <div class="activityTitle">{{activityList.title}}</div>
        <span>活动时间：{{activityList.activityTime}}</span>
      </div>
      <div class="content">
        <div class="btt">
          <span>副标题：{{activityList.subtitle}}</span>
          <span>空间：{{activityList.space}}</span>
          <span>有效期：{{activityList.validity}}</span>
        </div>
        <div class="btt">
          <span>原价：{{activityList.originalPrice}}元</span>
          <span>现价：{{activityList.price}}元</span>
          <span v-if="commission===1">佣金：{{activityList.commissionRatio}}%（佣金比例）</span>
          <span v-if="commission===2">佣金：{{activityList.fixedCommission}}元（固定佣金）</span>
        </div>
        <div class="btt">
          <span>总量：{{activityList.total}}</span>
          <span>单用户起售：{{activityList.startAt}}</span>
          <span>单用户限购：{{activityList.purchasing}}</span>
        </div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">图文介绍</div>
      <div class="content">
        <div class="ql-container ql-snow">
          <div class="ql-editor" v-html="activityList.graphicIntroduction">{{activityList.graphicIntroduction}}</div>
        </div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">使用规则/注意事项</div>
      <div class="content" style="padding-bottom:20px">
        <div class="facil">使用规则：
          <div style="margin-top:-22px;margin-left:-10px">
            <div class="notes" v-for="(item,i) in activityList.useRules" :key="i">{{i + 1 + '. ' + item}}</div>
          </div>
        </div>
        <div class="facil">注意事项：
          <div style="margin-top:-22px;margin-left:-10px">
            <div class="notes" v-for="(item,i) in activityList.attention" :key="i">{{i + 1 + '. ' + item}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">虚拟评论</div>
      <div class="content" style="margin-top:20px">
        <el-table :data="commentData" style="width: 98%;margin-left:1%" empty-text="没有评论信息">
          <el-table-column prop="name" label="姓名" min-width="100" align="center">
          </el-table-column>
          <el-table-column prop="evaluationTime" label="日期" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="comment" label="评价内容" min-width="520" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import 'quill/dist/quill.snow.css'
// import { formateDate } from '@/assets/js/untils'
export default {
  name: 'activityDetail',
  // untils[formateDate],
  data () {
    return {
      commission: 1,
      commentData: [],
      activityList: {
        cover: '',
        title: '',
        activityTime: '',
        subtitle: '',
        space: '',
        validity: '',
        originalPrice: '',
        price: '',
        fixedCommission: '',
        commissionRatio: '',
        total: '',
        startAt: '',
        purchasing: '',
        graphicIntroduction: '',
        useRules: '',
        attention: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
  },
  created () {
    this.getSpaceList()
  },
  mounted () {
  },
  methods: {
    getSpaceList () {
      this.$axios.post('/api/activity/showActivityById', {
        id: this.$route.query.id,
        userId: this.userInfo.userId
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          let arr = res.data.activity
          if (arr[0].commissionRatio === null) {
            this.commission = 2
          } else if (arr[0].fixedCommission === null) {
            this.commission = 1
          }
          let eva = res.data.evaluations
          this.activityList.activityTime = arr[0].activityTime.substring(2, 12) + '~' + arr[0].activityTime.substring(15, 25)
          this.activityList.attention = arr[0].attention.split('。')
          this.activityList.commissionRatio = arr[0].commissionRatio
          this.activityList.cumulativeSold = arr[0].cumulativeSold
          this.activityList.cumulativeUsed = arr[0].cumulativeUsed
          this.activityList.fixedCommission = arr[0].fixedCommission
          this.activityList.graphicIntroduction = arr[0].graphicIntroduction
          this.activityList.originalPrice = arr[0].originalPrice
          this.activityList.price = arr[0].price
          this.activityList.purchasing = arr[0].purchasing
          this.activityList.startAt = arr[0].startAt
          this.activityList.subtitle = arr[0].subtitle
          this.activityList.title = arr[0].title
          this.activityList.useRules = arr[0].useRules.split('。')
          this.activityList.total = arr[0].total
          this.activityList.validity = arr[0].validity.substring(2, 12) + '~' + arr[0].validity.substring(15, 25)
          // console.log(this.activityList.validity)
          this.activityList.space = arr[0].spaceTel
          this.activityList.cover = arr[0].cover
          let evaList = []
          for (let i = 0; i < eva.length; i++) {
            evaList.push({
              name: eva[i].name,
              comment: eva[i].comment,
              sort: eva[i].sort,
              evaluationTime: eva[i].evaluationTime
            })
          }
          this.commentData = [...evaList]
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.activityDetail
  // background #fff
  .infoBox
    width 100%
    padding-left 30px
    background #fff
    // display flex
    // flex-flow row wrap
    .header
      height 50px
      padding-top 20px
      position relative
      .logo
        width 80px
        height 60px
        // background #123
        border-radius 10px
      .activityTitle
        position absolute
        font-size 20px
        left 70px
        top 34px
        color #333333
        font-family PingFangSC-Medium
        font-weight 500
      span
        position absolute
        font-size 14px
        right 200px
        top 34px
    .content
      margin-top 50px
      font-size 14px
      padding-bottom 30px
      .btt
        display flex
        width 100%
        justify-content space-between
        span
          width 35%
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          font-family PingFangSC-Regular
          font-weight 400
      div
        margin-top 20px
        span
          // margin-left 18%
  .priceBox
    margin-left 30px
    margin-right 30px
    background #fff
    margin-top 30px
    .head
      // padding 20px 16px 16px
      height 55px
      border-bottom 1px solid #F2F6FC
      padding 0 24px
      font-size 16px
      line-height 50px
    .content
      // padding-bottom 20px
      .facil
        line-height 22px
        padding 0 24px
        margin-top 16px
        font-size 14px
        p
          display inline-block
          font-size 12px
          color gray
        .notes
          margin-left 80px
      .btn
        margin-top 20px
        margin-left 47%
        margin-bottom 20px
</style>
<style>
.ql-container.ql-snow {
  border: 1px solid transparent!important;
}
strong {
  font-weight: bold !important;
}
strong > em {
  font-weight: bold !important;
}
</style>
